<template>
	<view class="count">
		<view class="swip">
			<!-- <u-swiper height="400" indicator-pos="bottomRight" mode="number" :list="list"></u-swiper> -->
			<image :src="obj.cover" class="coverImg" mode="aspectFit"></image>
		</view>
		<!-- 下面的名字 -->
		<!-- 	<view class="name">
			安徒生童话，孩子喜欢
		</view> -->
		<view class="bookName b-f p-20 p-r">
			<view class="topName">
				{{obj.name}}
			</view>
			<view class="id m-t-10">
				书籍编号：{{obj.book_no}} &nbsp;&nbsp;&nbsp;&nbsp; 书籍库存：{{obj.stock}}本
			</view>
			<view class="boxFen">
				<button @click="shows=true" class="btns  f f-a-c f-j-c" :plain="true">
					<image src="/static/home/fenxiang.png" class="fenx m-r-10" mode=""></image>
					<view class="fenName">
						分享
					</view>
				</button>
			</view>
		</view>
		<!-- 详情 -->
		<view class="detilsName b-f p-20 m-t-25">
			<div v-if="statuse==1">
				<view class="toles m-b-10">
					书籍作者：{{obj.author}}
				</view>
				<image @click="statuse=2" src="/static/12.png"
					style="width: 34rpx;height: 34rpx;margin-left: 50%;transform: translateX(-50%);" mode=""></image>
			</div>
			<div class="" v-else>
				<view class="toles m-b-10">
					书籍作者：{{obj.author}}
				</view>
				<view class="toles m-b-10">
					书籍出版社：{{obj.press}}
				</view>
				<view class="toles m-b-10">
					书籍所属丛书：{{obj.series}}
				</view>
				<view class="toles m-b-10">
					适读年龄：{{obj.age_limit.name}}
				</view>
				<view class="toles f f-a-c m-b-10">
					书籍标签： <view v-for="(ite,ind) in obj.tags" :key="ind" class="tabs m-r-20">
						{{ite.name}}
					</view>
					<!-- 	<view class="tabs">
					启蒙教育
				</view> -->
				</view>
				<view class="toles m-b-10">
					页数：{{obj.page_num}}页
				</view>
				<view class="toles m-b-10">
					价格：¥{{obj.price}}
				</view>
				<view class="toles m-b-10">
					ISBN码：{{obj.isbn}}
				</view>
			</div>
		</view>
		<!-- 书籍简介 -->
		<view class="introduction m-t-25 b-f p-20">
			<view class="top">
				<u-parse :html="obj.intro"></u-parse>
			</view>
			<!-- 下面的借阅流程 -->
			<view @click="detiles" class="borrowing m-t-20 f f-a-c f-j-b">
				<view class="borrowingTit">
					借还流程
				</view>
				<image src="/static/home/you.png" class="youjian" mode=""></image>
			</view>
		</view>
		<!-- 下面的评论 -->
		<view class="b-f m-t-25 p-20">
			<!-- 下面的借阅流程 -->
			<view @click="allPing" class="borrowing f f-a-c f-j-b">
				<view class="borrowingTit">
					书籍评价（{{total}}）
				</view>
				<image src="/static/home/you.png" class="youjian" mode=""></image>
			</view>
			<!-- 下面的评论 -->
			<view class="review">
				<view v-for="(item,index) in list" :key="index" class="itemBoy m-t-20">
					<view class="boyTop f f-a-c ">
						<image :src="item.user.avatar" class="avar m-r-25" mode=""></image>
						<view class="phone">
							{{item.user.nickname}}
						</view>
					</view>
					<!-- 内容 -->
					<view class="counent m-t-20 m-b-20">
						{{item.content}}
					</view>
					<!-- 图片 -->
					<view class="image ">
						<view v-if="item.images" class="f f-a-c f-w-w p-r">
							<view v-for="(ite,inde) in item.images.split(',')" :key="inde" class="imgHui m-b-30">
								<image :src="ite" class="imgTu" mode=""></image>
							</view>

						</view>
						<view @click="severy(item)" class="recover">
							回复
						</view>
					</view>
					<!-- 下面的回复 -->
					<view v-if="item.replies.length>0" class="recoverList p-l-20 p-r-20 p-t-40 m-t-30">
						<view v-for="(it,ind) in item.replies" :key="ind" class="remoList f f-a-e f-j-b p-b-30">
							<view class="left f ">
								<image :src="it.user.avatar" class="toux m-r-20" mode=""></image>
								<view class="touRig">
									<view class="tit">
										{{it.user.nickname}}
									</view>
									<view class="titLiu">
										{{it.content}}
									</view>
								</view>
							</view>
							<!-- 	<view @click="severy(item,it)" class="right">
								回复
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- /下面的按钮 -->
		<view class="btnBot f f-a-b f-j-c p-t-20">
			<view @click="myReview" class="pingl m-r-20">
				我要评论
			</view>
			<view @click="myBorrow" class="jieyue">
				我要借阅
			</view>
		</view>
		<u-popup mode="bottom" border-radius="25" v-model="show">
			<view class="body p-30">
				<view class="recover">
					回复 {{name}}
				</view>
				<textarea name="" class="text m-t-20 m-b-25" v-model="recover" placeholder="请输入回复内容" id="" cols="30"
					rows="10"></textarea>
				<view @click="baocun" class="save">
					保存
				</view>
			</view>
		</u-popup>
		<!-- 弹出层 -->
		<u-popup mode="bottom" :mask-close-able="false" border-radius="30" v-model="shows">
			<view class="box">
				<view class="top f f-a-c f-j-c">
					<button open-type="share" class="btnss" :plain="true">
						<view @click="share" class="left f f-d-c f-a-c f-j-c m-r-80">
							<image src="/static/home/wec.png" class="wec" mode=""></image>
							<view class="wechat">
								微信好友
							</view>
						</view>
					</button>
					<button @click="circleOfFriends" class="btnss" :plain="true">
						<view class="right f f-d-c f-a-c f-j-c m-l-30">
							<image src="/static/home/fied.png" class="wec" mode=""></image>
							<view class="wechat">
								朋友圈
							</view>
						</view>
					</button>
				</view>
				<view class="xian">

				</view>
				<view @click="shows=false" class="off">
					关闭
				</view>
			</view>
		</u-popup>
		<!-- 下面的遮罩层 -->
		<u-mask :show="showss" @click="showss = false">
			<view class="backDian b-f f f-a-c f-j-c">
				点击 <image src="/static/dian.png" class="dian m-l-20 m-r-20" mode=""></image> 进行分享
			</view>
		</u-mask>
		<u-popup mode="center" border-radius="20" width="70%" v-model="showNum">
			<view class="cenPop">
				<view class="tit">
					借阅数量
				</view>
				<view class="f f-a-c f-j-c ">
					<image src="/static/my/jian.png" @click="jian" class="tuImg" mode=""></image>
					<input type="number" v-model="num" class="inp m-l-20 m-r-20" name="" id="">
					<image src="/static/my/jia.png" @click="jia" class="tuImg" mode=""></image>
				</view>
				<view class="xians">

				</view>
				<view class="btnQue f">
					<view @click="Cancels" class="Cancels f f-a-c f-j-c">
						取消
					</view>
					<view @click="Oks" class="oks f f-a-c f-j-c">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				statuse: 1,
				num: 1,
				showNum: false,
				recover: '', //回复
				showss: false,
				shows: false,
				show: false,
				content: '阿萨飒飒v但是v的v服务',
				imgList: [],
				list: [],
				id: 0,
				obj: {},
				page: 1,
				total: 0,
				name: '',
				item: {},
				ite: {}
			}
		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		onShow() {
			// 这个是书记评论列表
			this.Comment()
		},
		onLoad(options) {
			this.id = options.id
			this.initObj()
			// 这个是书记评论列表
			this.Comment()
		},
		methods: {
			// 点击跳转详情
			detiles() {
				uni.navigateTo({
					url: '/pageC/detils?name=borrow_return_process'
				})
			},
			// 点击确认
			async Oks() {
				let n = await this.$api.LikeToBorrow({
					num: this.num
				}, this.id)
				if (n.status) {
					this.showNum = false
				}
				setTimeout(() => {
					this.$msg(n.message)
				}, 1000)
			},
			// 点击取消
			Cancels() {
				this.num = 1
				this.showNum = false
			},
			// 点击加
			jia() {
				this.num++
			},
			// 点击减
			jian() {
				if (this.num <= 1) return
				this.num--
			},
			// 评论列表
			async Comment() {
				let n = await this.$api.CommentList({
					id: this.id,
					page: this.page
				})
				this.list = n.data.data
				// n.data.data.forEach(item => {

				// })
				this.total = n.data.total
			},
			async initObj() {
				let n = await this.$api.BookDetails(this.id)
				this.obj = n.data
			},
			// /点击分享朋友圈
			circleOfFriends() {
				this.shows = false
				this.showss = true
			},
			// 我要借阅
			myBorrow() {
				if (this.userinfo.profile && this.userinfo.profile.identity == 1) {
					this.$msg('暂无会员，请先升级会员')
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1000)
					return
				}
				this.showNum = true
				// uni.navigateTo({
				// 	url: '/pages/index/BorrowNow'
				// })
			},
			// 我要评论
			myReview() {
				uni.navigateTo({
					url: '/pages/index/WantToComment?id=' + this.id
				})
			},
			// /点击回复
			async severy(item, ite = 0) {
				this.show = true
				if (ite) {
					this.name = ite.user.nickname
				} else {
					this.name = item.user.nickname
				}
				this.item = item
				this.ite = ite
				console.log(item, ite);

			},
			// 点击保存
			async baocun() {
				let n = await this.$api.ReplyReview({
					op_comment_id: this.item.id,
					reply_user_id: this.ite ? this.ite.user.id : this.item.user.id,
					content: this.recover
				}, this.id)
				this.show = false
				this.recover = ''
				setTimeout(() => {

					this.$msg(n.message)
				}, 1000)
				if (n.status) {
					this.Comment()
				}
			},
			// 全部评论
			allPing() {
				uni.navigateTo({
					url: '/pages/index/AllComments?id=' + this.obj.id
				})
			},
			share() {
				uni.share({
					title: '分享',
					path: '/pages/index/DetailsPage'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cenPop {
		padding-top: 20rpx;

		.btnQue {
			height: 100rpx;

			.Cancels {
				flex: 1;
				border-right: 2rpx solid rgba(60, 60, 67, 0.36);
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #666666;
			}

			.oks {
				flex: 1;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #009d85;
			}
		}

		.tit {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #333333;
			margin-bottom: 30rpx;
		}

		.inp {
			width: 190rpx;
			height: 80rpx;
			background: #ffffff;
			border: 2rpx solid #dedede;
			border-radius: 12rpx;
			text-align: center;
		}

		.tuImg {
			width: 48rpx;
			height: 48rpx;
		}

		.xians {
			margin-top: 50rpx;
			width: 100%;
			height: 2rpx;
			background: rgba(60, 60, 67, 0.36);
		}
	}

	.backDian {
		position: absolute;
		top: 50rpx;
		right: 50rpx;
		width: 276rpx;
		height: 70rpx;
		background: #ffffff;
		border-radius: 12rpx;

		// margin-top: 100rpx;
		.dian {
			width: 38rpx;
			height: 12rpx;
		}
	}

	.box {
		padding-top: 30rpx;
		padding-bottom: 50rpx;
	}

	.btnss {
		border: none;
		padding: 0 !important;
		margin: 0 !important;
		// width: 100%;
		// height: 100%;
	}

	.wec {
		width: 96rpx;
		height: 96rpx;
	}

	.xian {
		width: 750rpx;
		height: 2rpx;
		background-color: #e6e6e6;
		margin: 40rpx 0;
	}

	button {
		border: none;
		padding: 0 !important;
		margin: 0 !important;
	}

	.off {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
	}

	.wechat {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #333333;
		margin-top: -20rpx;
	}


	.recover {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #333333;
	}

	.save {
		width: 690rpx;
		height: 88rpx;
		line-height: 85rpx;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		margin-top: 80rpx;
	}

	.text {
		width: 90%;
		height: 180rpx;
		background: #f9f9f9;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.body {}

	.btnBot {
		height: 200rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;

		.pingl {
			width: 334rpx;
			height: 88rpx;
			line-height: 85rpx;
			border: 2rpx solid #009d85;
			border-radius: 46rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #009d85;
		}

		.jieyue {
			width: 334rpx;
			height: 88rpx;
			line-height: 85rpx;
			background: #009d85;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
	}

	.touRig {
		width: 80%;
	}

	.recoverList {
		width: 100%;
		background: #f9f9f9;
		border-radius: 16rpx;

		.remoList {
			.left {
				width: 90%;
				// align-items: flex-start;

				.toux {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;


				}
			}

			.right {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.titLiu {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #666666;
	}

	.tit {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
	}

	.itemBoy {
		padding-bottom: 25rpx;
		border-bottom: 2rpx solid #f8f8f8;

		.image {
			position: relative;

			.recover {
				position: absolute;
				bottom: 10rpx;
				right: 0rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #009d85;
			}

			.imgHui {
				width: 160rpx;
				height: 160rpx;
				background: #f6f6f6;
				border-radius: 8rpx;
				margin-right: 50rpx;
			}

			.imgTu {
				width: 132rpx;
				height: 132rpx;
				margin-top: 50%;
				margin-left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.boyTop {
			.avar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.phone {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #333333;
			}
		}

		.counent {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #333333;
		}
	}

	.borrowing {
		.borrowingTit {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
		}

		.youjian {
			width: 17rpx;
			height: 30rpx;
		}
	}

	.detilsName {
		.toles {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #666666;
		}

		.tabs {
			width: 118rpx;
			height: 40rpx;
			line-height: 40rpx;
			background: #fff9e8;
			border-radius: 8rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #ecbf2f;
		}
	}

	.boxFen {
		position: absolute;
		width: 120rpx;
		height: 48rpx;
		right: 0;
		top: 20rpx;
		background: #ebf7f5;
		// border-radius: 24rpx;
		border-bottom-left-radius: 24rpx;
		border-top-left-radius: 24rpx;

		.fenx {
			width: 20rpx;
			height: 20rpx;
		}

		.fenName {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #009d85;
		}

	}

	.btns {
		padding: 0%;
		margin: 0%;
		border: none;
		height: 48rpx;
	}

	.topName {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #333333;
	}

	.id {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #999999;
	}

	.name {
		width: 750rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #009d85;
		font-size: 40rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 500;
		text-align: center;
		color: #ffffff;
	}

	.swip {
		height: 480rpx;
		width: 100%;

		.coverImg {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		overflow-y: auto;
		padding-bottom: 200rpx;
	}
</style>